<template>
  <div class="friend-list">
    <div class="friend-list-header">
      <h3>好友列表</h3>
      <button @click="refreshFriends">刷新</button>
    </div>
    
    <div class="friend-search">
      <input 
        type="text" 
        v-model="searchQuery" 
        placeholder="搜索好友..."
      />
    </div>
    
    <div class="friend-list-content">
      <div 
        v-for="friend in filteredFriends" 
        :key="friend.id" 
        class="friend-item"
        :class="{ 'online': isOnline(friend) }"
      >
        <div class="friend-avatar">
          <img :src="friend.avatar" :alt="friend.name" />
          <span class="status-dot"></span>
        </div>
        
        <div class="friend-info">
          <h4>{{ friend.name }}</h4>
          <p>等级: {{ friend.level }}</p>
        </div>
        
        <div class="friend-actions">
          <button @click="visitFarm(friend.id)">访问</button>
          <button @click="sendGift(friend.id)">送礼</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue';
import { useStore } from 'vuex';

export default defineComponent({
  name: 'FriendList',
  
  setup() {
    const store = useStore();
    const searchQuery = ref('');
    
    const friends = computed(() => store.state.social.friends);
    const filteredFriends = computed(() => {
      const query = searchQuery.value.toLowerCase();
      return friends.value.filter(friend => 
        friend.name.toLowerCase().includes(query)
      );
    });
    
    const isOnline = (friend: any) => {
      // 实现在线状态检查逻辑
      return true;
    };
    
    const visitFarm = async (friendId: string) => {
      await store.dispatch('social/visitFriend', friendId);
    };
    
    const sendGift = async (friendId: string) => {
      await store.dispatch('social/sendDailyGift', {
        toId: friendId,
        itemType: 'gift'
      });
    };
    
    const refreshFriends = async () => {
      // 实现刷新好友列表逻辑
    };
    
    return {
      searchQuery,
      filteredFriends,
      isOnline,
      visitFarm,
      sendGift,
      refreshFriends
    };
  }
});
</script>

<style scoped>
.friend-list {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 16px;
}

.friend-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.friend-search {
  margin-bottom: 16px;
}

.friend-search input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.friend-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border: 1px solid #eee;
  border-radius: 8px;
  margin-bottom: 8px;
}

.friend-item.online .status-dot {
  background-color: #4CAF50;
}

.friend-avatar {
  position: relative;
  margin-right: 12px;
}

.friend-avatar img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.status-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #ccc;
  border: 2px solid white;
}

.friend-info {
  flex: 1;
}

.friend-info h4 {
  margin: 0;
  font-size: 16px;
}

.friend-info p {
  margin: 4px 0 0;
  color: #666;
  font-size: 14px;
}

.friend-actions {
  display: flex;
  gap: 8px;
}

.friend-actions button {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  background-color: #4CAF50;
  color: white;
  cursor: pointer;
}

.friend-actions button:hover {
  background-color: #45a049;
}
</style> 